<template>
	<div class="container-fluid">
		<div class="top">
			<top-swiper :banners="banners"></top-swiper>
			<div class="top-background"></div>
			<div class="header">
				<div class="title">
					<div class="icon"></div>
					<span class="content">中国共产党中国铁路广州局集团有限公司委员会党校</span>
					<home-nav></home-nav>
				</div>
				<div class="text-wrapper">
					<span>忠诚</span>
					<span style="margin-left: 30px">自信</span>
					<span style="margin-left: 30px">求是</span>
					<span style="margin-left: 30px">致远</span>
				</div>
			</div>
		</div>
		<!-- 介绍 -->
		<div class="introduction flex-80 bg">
			<div class="content">
				<div class="left">
					<div class="top-des">
						<div class="text-wrapper_3">
							<span class="text_13">党校介绍</span>
						</div>
						<div class="text-wrapper_4">
							<span class="text_12">ABOUTUS</span>
						</div>
					</div>
					<div class="introduction_des" v-if="groupInfo">
						<div v-html="groupInfo.colContent" class="art-body"></div>
					</div>
					<img class="more" style="float: right; margin-top: 20px" src="../../assets/images/home/right_arrow.png" @click="onClickGroupInfo" />
				</div>
				<div class="right d-xl-block d-none">
					<img class="introduction_img" src="../../assets/images/home/home_bg1.png" />
				</div>
			</div>
		</div>
		<!-- 校园映像 -->
		<div class="school_image flex-80 bg">
			<div class="content">
				<div class="left">
					<div class="text-wrapper_5 d-flex flex-column">
						<span class="text_15">校园映像</span>
						<span class="text_16">School&nbsp;Album</span>
					</div>
					<div class="tab-list">
						<span
							@click="onClickSchoolTab(index)"
							class="tab_item"
							v-for="(item, index) in school_image_tabs"
							:key="item.colId"
							:class="[currentImageIndex == index ? 'active' : '']"
							>{{ item.colTitle }}</span
						>
					</div>
				</div>
				<div class="right">
					<schoolImage-swiper :tabData="school_image_tabs[currentImageIndex]" @onClick="onClickSchoolImage"></schoolImage-swiper>
				</div>
			</div>
		</div>
		<!-- 师说红课 -->
		<div class="red_subject flex-80 bg">
			<div class="flex_c_content">
				<div class="subject_header">
					<span class="title">师说红课</span>
					<img class="more" @click="onClickMore($globalDict.articleCode.teacherspeak)" src="../../assets/images/home/right_arrow.png" />
				</div>
				<span class="des">The&nbsp;teacher&nbsp;said</span>
				<el-skeleton :loading="red_tabs.length == 0" class="d-flex flex-row">
					<template slot="template">
						<div class="d-flex flex-row justify-content-between">
							<div class="subject_item" v-for="tab in 3" :key="tab.tabKey">
								<div class="subject_item_header">
									<el-skeleton-item variant="image" style="width: 100%; height: 180px" />
								</div>
								<div v-for="row in 6" :key="row.colId">
									<el-skeleton-item variant="text" style="height: 20px; margin-top: 10px" />
								</div>
							</div>
						</div>
					</template>
					<template slot="default">
						<div class="subject_item" v-for="tab in red_tabs" :key="tab.tabKey">
							<div class="subject_item_header" v-if="tab.firstElement" @click="onClickRedTab(tab.firstElement)">
								<div class="time">
									<span class="time_1">{{ tab.firstElement.month }}-{{ tab.firstElement.day }}</span
									><br />
									<span class="time_2">{{ tab.firstElement.year }}</span>
								</div>
								<span class="subject_title">{{ tab.firstElement.colTitle }}</span>
								<img class="header_img" :src="tab.firstElement.colCoverImg" alt="" />
							</div>
							<div v-for="row in tab.red_list" :key="row.colId" class="tabRow" @click="onClickRedTab(row)">
								<div class="right-item">
									<p class="cicrle"></p>
									<a class="red_content" :title="row.colTitle"> {{ row.colTitle }}</a>
								</div>
								<span class="date">{{ row.colDate }}</span>
							</div>
						</div>
					</template>
				</el-skeleton>
				<!-- <div class="d-flex flex-row justify-content-between"></div> -->
			</div>
		</div>
		<!-- 党校书架 -->
		<div class="school_bookshelf flex-80 bg">
			<div class="flex_c_content">
				<div class="subject_header">
					<span class="title" style="color: white">党校书架</span>
					<img class="more" @click="onClickMore($globalDict.articleCode.dx_bookshelf)" src="../../assets/images/home/right_arrow_white.png" />
				</div>
				<span class="des" style="color: white">PARTY SCHOOL BOOKSHELF</span>
				<el-skeleton :loading="partyBooks.length == 0" class="d-flex flex-row flex-wrap book_list" style="margin-top: 50px">
					<template slot="template">
						<div class="d-flex flex-row flex-wrap">
							<el-skeleton-item variant="image" v-for="item in 10" :key="item" class="bookshelf_item" />
						</div>
					</template>
					<template slot="default">
						<div class="bookshelf_item" v-for="book in partyBooks" :key="book.colId" @click="onClickBook(book)">
							<img class="book_image" :src="book.colCoverImg"  />
							<div class="mark_bg">点击阅读</div>
						</div>
					</template>
				</el-skeleton>
			</div>
		</div>
		<!-- 培训师资 -->
		<div class="traching_staff flex-80 bg">
			<div class="flex_c_content">
				<div class="subject_header">
					<span class="title" style="color: black">培训师资</span>
					<img class="more" @click="onClickMore($globalDict.articleCode.trainingteacher)" src="../../assets/images/home/right_arrow.png" />
				</div>
				<span class="des" style="color: rgba(153, 153, 153, 1)">TRAIN TRACHERS</span>
				<div class="d-flex flex-row flex-nowrap tearcher_list" style="margin-top: 50px">
					<div class="tearcher_item" v-for="teacher in teachersTop" :key="teacher.colId" @click="onClickTeacher(teacher)">
						<img :src="teacher.colCoverImg" />
						<span class="tearcher_name">{{ teacher.colTitle }}</span> <br />
						<span class="tearcher_des" :title="teacher.colBriefIntroduction">
							{{ teacher.colBriefIntroduction }}
						</span>
					</div>
				</div>
				<div class="d-flex flex-row">
					<grace ref="grace" @click="onClickTeacher" :graceList="tearcherList"></grace>
				</div>
			</div>
		</div>
		<!-- 介绍内容 -->
		<div class="contentIntroduction flex-80 bg">
			<div class="flex_c_content">
				<div class="d-flex flex-column align-items-center">
					<span class="header_title">其他动态内容</span>
					<span class="header_des">OTHERS</span>
				</div>
				<!-- <div class="d-flex"> -->
					<dynamic-swiper @onClick="onClickDynamic"></dynamic-swiper>
				<!-- </div> -->
			</div>
			<div class="header_bg"></div>
		</div>
		<!-- 友情链接 -->
		<div class="link_list flex-80 bg">
			<div class="d-flex flex-row align-items-center justify-content-center">
				<div class="d-flex flex-column align-items-start">
					<span class="header_title" style="color: rgba(51, 51, 51, 1)">友情链接</span>
					<span class="header_des" style="color: rgba(153, 153, 153, 1)">FRIENDLY LINKS</span>
				</div>
				<el-skeleton class="d-flex flex-row flex-wrap" style="margin-left: 100px" animated :loading="links.length == 0">
					<template slot="template">
						<div class="row d-flex justify-content-around">
							<el-skeleton-item variant="text" v-for="item in 3" :key="item" class="link_item" />
						</div>
					</template>
					<template slot="default">
						<div class="d-flex flex-row flex-wrap" style="margin-left: 100px">
							<div
								class="link_item d-flex flex-row flex-wrap align-items-center justify-content-between"
								v-for="link in links"
								:key="link.colId"
								@click="onClickLink(link)"
							>
								<span class="link_p">{{ link.colTitle }}</span>
								<img class="link_icon" src="../../assets/images/home/right_arrow_white_small.png" />
							</div>
						</div>
					</template>
				</el-skeleton>
			</div>
		</div>
		<footers></footers>
	</div>
</template>
<script>
import homeNav from './components/home_nav.vue'
import Footers from '@/layout/components/Footer.vue'
import grace from './components/grace.vue'
import dynamicSwiper from './components/dynamic-swiper.vue'
import topSwiper from './components/top-swiper.vue'
import schoolImageSwiper from './components/schoolImage-swiper.vue'
import {getWebInfoList} from "@/api/webbaseinfo";
export default {
	components: {
		homeNav,
		Footers,
		grace,
		dynamicSwiper,
		topSwiper,
		schoolImageSwiper,
	},
	data() {
		return {
			constants: {},
			groupInfo: null,
			banners: [
				{
					colImage: require('../../assets/images/home/banner1.png'),
				},
			],
			school_image_tabs: [],
			red_tabs: [
				// {
				// 	tabKey: 1,
				// 	red_list: [],
				// },
				// {
				// 	tabKey: 2,
				// 	red_list: [],
				// },
				// {
				// 	tabKey: 3,
				// 	red_list: [],
				// },
			],
			currentImageIndex: 0,
			partyBooks: [], //党校书架
			links: [],
			teachersTop: [], // 师资培训置顶数据，3条
			tearcherList: [], // 师资培训列表展示数据
		}
	},
	mounted() {
		// 获取顶部滑动广告
		this.getAds()
		// 获取校园简介
		this.getDxInfo()
		// 获取校园印象
		this.getSchoolImage()
		// 获取师说红课
		this.getTeacherSpeak()
		// 获取党校书架
		this.getDXBookshelf()
		// 获取培训师资
		this.getTrainingTeacher()
		// 获取友情链接
		this.getLinks()
	},
	methods: {

		onClickMore(typeCode) {
			this.$store.dispatch('appData/getArticleTypeListByCode', typeCode).then((article) => {
				console.log('onClickMore', typeCode, article)
				let query = {
					colId: article.colId,
					navId: article.colId,
					title: article.colTitle,
				}
				this.$router.push({
					path: '/list/' + typeCode,
					query
				})
			})
		},
		onClickSchoolTab(index) {
			this.currentImageIndex = index
		},
		// 查看集团详情
		onClickGroupInfo() {
			this.$router.push({
				path: '/group/profile?colId=' + this.groupInfo.colType + '&colQuery=' + this.$globalDict.articleCode.dxInfo,
			})
		},
		// 点击校园党校
		onClickBookShelf() {
			this.$router.push({
				path: '/partybookshelf',
			})
		},
		// 点击校园印象
		onClickSchoolImage(item) {
			this.enterArticle(item)
		},
		// 点击友情链接
		onClickLink(link) {
			window.open(link.colUrl)
		},
		// 点击动态展示
		onClickDynamic(item) {
			this.enterArticle(item)
		},
		// 点击教师
		onClickTeacher(teacher) {
			this.enterArticle(teacher)
		},
		// 点击红课
		onClickRedTab(redItem) {
			this.enterArticle(redItem)
		},
		// 阅读书籍
		onClickBook(book) {
			this.enterArticle(book)
		},
		enterArticle(item) {
			const nav = this.$store.getters.levelMenus.find((e) => {
				if (e.colId == item.colNavMenuId) {
					return e
				}
			})
			console.log('enterCarousel', nav)
			if (nav) {
				let path = '/list/' + nav.colId
				let query = {
					colId: item.colId,
					navId: nav.colId,
					title: nav.colTitle,
					cardType: nav.colListType,
					type: 'detail',
				}
				this.$router.push({
					path: path,
					query,
				})
			}
		},
		// 获取banner
		getAds() {
			this.$api.ads.getAds().then((res) => {
				const data = res.data
				if (data.code == 200) {
					const rows = data.rows
					if (Array.isArray(rows) && rows.length > 0) {
						this.banners = rows
					}
					console.log('getAds', rows)
				}
			})
		},
		// 获取友情链接
		getLinks() {
			this.$api.common.getLinkList().then((res) => {
				const data = res.data
				if (data.code == 200) {
					const rows = data.rows
					this.links = rows
				}
			})
		},
		// 获取党校介绍
		getDxInfo() {
			this.$api.group.getGroupInfoByCode(this.$globalDict.articleCode.dxInfo).then((res) => {
				const data = res.data
				if (data.code == 200) {
					this.groupInfo = data.data
				}
			})
		},
		// 获取校园印象
		getSchoolImage() {
			this.$store.dispatch('appData/getArticleTypeListByCode', this.$globalDict.articleCode.schoolimage).then((article) => {
				this.$api.articletype
					.getArticleLlist({
						articleType: article.colId,
						pageSize: 20,
						pageNum: 1,
					})
					.then((res) => {
						if (res.data.code == 200) {
							this.school_image_tabs = res.data.rows
						}
					})
					.catch((error) => {})
			})
		},
		// 获取师说红课
		getTeacherSpeak() {
			this.$store.dispatch('appData/getArticleTypeListByCode', this.$globalDict.articleCode.teacherspeak).then((article) => {
				this.$api.articletype
					.getArticleLlist({
						articleType: article.colId,
						pageSize: 24,
						pageNum: 1,
					})
					.then((res) => {
						if (res.data.code == 200) {
							const rows = res.data.rows
							if (Array.isArray(rows) && rows.length > 0) {
								let length = rows.length
								let red_tabs = []
								while (length % 3 != 0 && length > 3) {
									length -= 1
								}
								console.log('师说红课', length)
								for (let index = 0; index < length; index++) {
									const element = rows[index]
									const tabIndex = index % 3
									const date = new Date(element.colDate)
									const yearMonthDay = {
										year: date.getFullYear(),
										month: date.getMonth() + 1,
										day: date.getDate(),
									}
									if (!red_tabs[tabIndex]) {
										const first = {
											...element,
											...yearMonthDay
										}
										red_tabs[tabIndex] = {
											red_list: [],
											firstElement: first,
											tabKey: tabIndex + 1,
										}
									} else {
										red_tabs[tabIndex].red_list.push({
											...element,
											...yearMonthDay
										})
									}
								}
								this.red_tabs = red_tabs
								console.log('师说红课', red_tabs)
							}
						}
					})
					.catch((error) => {})
			})
		},
		// 获取党校书架
		getDXBookshelf() {
			this.$store.dispatch('appData/getArticleTypeListByCode', this.$globalDict.articleCode.dx_bookshelf).then((article) => {
				this.$api.articletype
					.getArticleLlist({
						articleType: article.colId,
						pageSize: 20,
						pageNum: 1,
					})
					.then((res) => {
						if (res.data.code == 200) {
							this.partyBooks = res.data.rows
						}
					})
					.catch((error) => {})
			})
		},
		// 获取师资培训
		getTrainingTeacher() {
			this.$store.dispatch('appData/getArticleTypeListByCode', this.$globalDict.articleCode.trainingteacher).then((article) => {
				const getTop = this.$api.articletype.getArticleLlist({
					articleType: article.colId,
					pageSize: 3,
					pageNum: 1,
					isTop: 1,
				})
				const getList = this.$api.articletype.getArticleLlist({
					articleType: article.colId,
					pageSize: 20,
					pageNum: 1,
					isTop: 0,
				})
				const promiseList = [getTop, getList]
				Promise.all(promiseList).then((results) => {
					const top = results[0]
					const list = results[1]
					if (top.data.code == 200) {
						const topData = top.data.rows
						console.log('topData', topData)
						this.teachersTop = topData
					}
					if (list.data.code == 200) {
						const listData = list.data.rows
						console.log('listData', listData)
						this.tearcherList = listData
					}
				})
			})
		},
	},
}
</script>
<style lang="scss" scoped>
.top {
	position: relative;
	height: 100%;
}

.top-background {
	position: absolute;
	background: url(../../assets/images/home_swiper_background.png) 100% no-repeat;
	background-size: 100% 100%;
	height: 100%;
	width: 100%;
	z-index: 1;
	top: 0;
	pointer-events: none;
}

.header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 2;
	position: absolute;
	width: 100%;
	top: 80px;

	.title {
		display: flex;
		align-items: center;

		.icon {
			width: 43px;
			height: 50px;
			background: url(../../assets/images/logo_dx.png) 0px 0px no-repeat;
			background-size: 44px 50px;
			flex-shrink: 0;
		}

		.content {
			overflow-wrap: break-word;
			color: rgba(255, 255, 255, 1);
			font-size: 26px;
			white-space: nowrap;
			margin-left: 14px;
		}
	}

	.text-wrapper {
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 80px;
		text-align: center;
		white-space: nowrap;
		line-height: 110px;
		margin-top: 180px;
		user-select: none;
		pointer-events: none;
	}
}

.more {
	width: 29px;
	height: 29px;
	cursor: pointer;
}

.content {
	position: relative;
	display: flex;
	width: 60%;

	.left {
		flex-grow: 1;
	}

	.right {
		flex: 0 0 30%;
		margin-left: 100px;
	}
}

.bg {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	padding: 150px 0;
}

.flex-80 {
	flex: 0 0 80%;
}

.introduction {
	background: url(../../assets/images/home/tu2.png) 100% no-repeat;
	/*margin-top: 50px;*/

	.top-des {
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		color: white;
		font-size: 24px;
		height: 50px;
		line-height: 50px;

		.text-wrapper_3 {
			background: url(../../assets/images/home/text_bg1.png) -1px 0px no-repeat;
			background-size: 180px 50px;
			width: 180px;
			text-align: right;
			padding-right: 30px;
		}

		.text-wrapper_4 {
			background: url(../../assets/images/home/text_bg2.png) 0px 0px no-repeat;
			background-size: 223px 50px;
			width: 222px;
			padding-left: 30px;
			margin-left: -30px;
		}
	}

	.introduction_des {
		display: flex;
		flex-wrap: nowrap;
		margin-top: 120px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 19px;
		text-align: justify;
		line-height: 50px;
	}
}

.school_image {
	background: url(../../assets/images/home/tu3.png) 100% no-repeat;

	.left {
		flex: 0 0 10%;
	}

	.right {
		flex: 0 0 80%;
		overflow: hidden;
	}

	.text-wrapper_5 {
		width: 254px;
		height: 100px;
		background: url(../../assets/images/home/text_bg3.png) 100% no-repeat;
		background-size: 100% 100%;
		color: rgba(255, 255, 255, 1);
		overflow-wrap: break-word;

		.text_15 {
			font-size: 24px;
			text-align: left;
			white-space: nowrap;
			line-height: 33px;
			margin: 7px 0 0 60px;
		}

		.text_16 {
			font-size: 20px;
			text-align: left;
			white-space: nowrap;
			line-height: 27px;
			margin: 21px 0 12px 60px;
		}
	}

	.tab-list {
		display: flex;
		flex-direction: column;
		margin-top: 50px;

		.tab_item {
			overflow-wrap: break-word;
			font-size: 30px;
			text-align: left;
			line-height: 90px;
			color: white;
			margin-left: 30px;
			cursor: pointer;
		}

		.active {
			color: rgba(248, 231, 28, 1);
		}
	}

	.school_img {
		height: 100%;
		border: 1px solid white;
		min-width: 90%;
		min-height: 100%;
		// width: 1000px;
		// height: 680px;
	}
}

.red_subject {
	display: flex;
	align-items: center;
	background: url(../../assets/images/home/tu4.png) 100% no-repeat;

	.subject_item {
		flex: 0 0 30%;
		align-items: center;
		margin-top: 50px;
		overflow: hidden;
		margin-right: 80px;

		.subject_item_header {
			position: relative;
			margin-bottom: 30px;

			.time {
				position: absolute;
				left: 30px;
				top: 10px;
			}

			.time_1 {
				height: 42px;
				overflow-wrap: break-word;
				color: rgba(51, 51, 51, 1);
				font-size: 30px;
				text-align: left;
				white-space: nowrap;
				line-height: 42px;
			}

			.time_2 {
				margin-top: 2px;
				overflow-wrap: break-word;
				color: rgba(51, 51, 51, 1);
				font-size: 20px;
				text-align: left;
				white-space: nowrap;
				line-height: 27px;
			}

			.header_img {
				width: 100%;
				height: 180px;
				border: 1px solid #e5e5e5;
				cursor: pointer;
			}

			.subject_title {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				font-size: 14px;
				color: white;
				background-color: rgba($color: #000000, $alpha: 0.5);
				padding: 5px;
			}
		}
	}
}

.flex_c_content {
	display: flex;
	flex-direction: column;
	width: 70%;

	.subject_header {
		display: flex;
		align-items: center;

		.title {
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 40px;
			text-align: left;
			white-space: nowrap;
			line-height: 55px;
			margin-right: 30px;
		}
	}

	.des {
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 22px;
		text-transform: uppercase;
		text-align: left;
		white-space: nowrap;
		line-height: 30px;
		margin-top: 7px;
	}

	.tabRow {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 5px 0;
		overflow: hidden;
		align-items: center;

		.right-item {
			display: flex;
			align-items: center;
			width: 85%;
			cursor: pointer;

			.cicrle {
				flex-shrink: 0;
				width: 2px;
				height: 2px;
				border-radius: 1px;
				background: rgba(51, 51, 51, 1);
				margin-bottom: 0;
				margin-right: 5px;
			}

			/* 必须与上一条配合使用 */
			.red_content {
				overflow-wrap: break-word;
				color: rgba(51, 51, 51, 1);
				font-size: 16px;
				text-align: left;
				line-height: 35px;
				width: auto;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}

		.date {
			overflow-wrap: break-word;
			color: rgba(153, 153, 153, 1);
			font-size: 16px;
			text-align: left;
			line-height: 35px;
		}
	}
}

.school_bookshelf {
	display: flex;
	align-items: center;
	background: url(../../assets/images/home/tu5.png) 100%;
	padding: 200px 0 100px 0;

	.book_list {
		.bookshelf_item {
			position: relative;
			cursor: pointer;
			margin: 0 38px 40px 0;
			width: 210px;
			height: 300px;
			border: 1px solid #e5e5e5;

			.book_image {
				width: 100%;
				height: 100%;
			}

			.mark_bg {
				position: absolute;
				right: 0;
				bottom: 0;
				overflow-wrap: break-word;
				color: white;
				font-size: 14px;
				text-align: left;
				white-space: nowrap;
				line-height: 20px;
				padding: 2px 8px;
				background-color: rgba(0, 0, 128, 0.7);
			}
		}

		.bookshelf_item:nth-child(n + 6) {
			margin-bottom: 0;
		}
	}
}

.contentIntroduction {
	display: flex;
	align-items: center;
	background: url(../../assets/images/home/tu6.png) 100% no-repeat;
	padding: 200px 0 100px 0;
	position: relative;

	.header_bg {
		position: absolute;
		right: 0;
		top: 50px;
		background: url(../../assets/images/home/tu7.png) 100% no-repeat;
		width: 100%;
		height: 260px;
	}
}

.header_title {
	overflow-wrap: break-word;
	color: rgba(51, 51, 51, 1);
	font-size: 40px;
	text-align: left;
	white-space: nowrap;
	line-height: 55px;
}

.header_des {
	overflow-wrap: break-word;
	color: rgba(153, 153, 153, 1);
	font-size: 22px;
	text-align: left;
	white-space: nowrap;
	line-height: 30px;
	margin-top: 7px;
}

.link_list {
	padding: 120px 0 80px 0;

	.link_item {
		background-color: rgba(255, 255, 255, 1);
		width: 272px;
		height: 50px;
		border: 1px solid rgba(216, 216, 216, 1);
		padding: 0 20px;
		margin-right: 50px;
		cursor: pointer;

		.link_p {
			height: 22px;
			overflow-wrap: break-word;
			color: rgba(102, 102, 102, 1);
			font-size: 16px;
			text-align: left;
			white-space: nowrap;
			line-height: 22px;
		}

		.link_icon {
			width: 7px;
			height: 11px;
		}
	}
}

.traching_staff {
	display: flex;
	align-items: center;
	padding: 200px 0 100px 0;
}

.tearcher_list {
	justify-content: space-between;

	.tearcher_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: rgba(0, 0, 128, 0.05);
		padding: 45px;
		flex: 0 0 30%;
		cursor: pointer;

		.tearcher_name {
			overflow-wrap: break-word;
			color: rgba(0, 0, 128, 1);
			font-size: 20px;
			text-align: left;
			white-space: nowrap;
			line-height: 27px;
			margin-top: 50px;
		}

		.tearcher_des {
			color: rgba(102, 102, 102, 1);
			font-size: 20px;
			text-align: left;
			line-height: 35px;
			margin-top: 16px;
			max-height: 240px;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-line-clamp: 7;
			-webkit-box-orient: vertical;
			white-space: normal;
			/* 允许换行 */
			display: -webkit-box;
		}
	}
}
</style>
